<template>
	<view class="theme-item-container">
	
			<template v-if="!isMore">	
				<navigator class="box" :url="'../../pages/classifylist/classifylist?id='+id+'&'+'name='+name">
				<image class="pic" :src="url" mode=""></image>
				<view class="mask">
					{{name}}
				</view>
				<view class="label">
					{{formatTimeDiff(time)==null?'3月':formatTimeDiff(time)}}前更新
				</view>
			</navigator>
			</template>
		
		<template v-if="isMore">
			<navigator url="/pages/classify/classify" class="box" open-type="reLaunch">
				<view  class="more">
					<image class="pic" src="../../common/images/more.jpg" mode=""></image>
					<view class="more-text">
						<view><uni-icons color="#fff" type="more-filled" size="30"></uni-icons></view>
						<view>更多</view>
					</view>
				</view>
				
			</navigator>
	
		</template>
	
	</view>
</template>

<script lang="ts" setup>
	import formatTimeDiff from '../../utils/formattTimeDiff';
defineProps({
	isMore:{
		default:false,
		type:Boolean
	},
	url:{
		default:"../../pages/classifylist/classifylist",
		type:String
	},
	name:{
		default:"精美图片",
		type:String
	},
	time:{
		type:Number,
		default:15320000
	},
	id:{
		type:String,
		request:true
	}
})
function goClassify(){
	uni.navigateTo({
		url:"/pages/classify/classify",
		
	})
}
</script>

<style lang="scss" scoped>
.theme-item-container{
	width: 100%;
	.box{
		position: relative;
		height: 340rpx;
		border-radius: 10px;
		overflow: hidden;
		.pic{
			width: 100%;
			height: 100%;
		}
		.mask{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 70rpx;
			background: rgba(0, 0, 0, .2);
			color: #fff;
			text-align: center;
			line-height: 70rpx;
			backdrop-filter: blur(12rpx);
			font-weight: 600;
			font-size:30rpx ;
		}
		.label{
			
			position: absolute;
			top: 0;
			left: 0;
			padding: 6rpx 10rpx;
			color: #fff;
			background-color: #e89473;
			border-bottom-right-radius: 10px;
			font-size: 22rpx;
			
		}
		.more{
			width: 100%;
height: 100%;

.more-text{
	
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transform: translate(-50%,-50%);
	color: #fff;
	font-size: 28rpx;
	backdrop-filter: blur(15rpx);
}
		}
	}
	
}
</style>